<template>
  <div :class="{'mobile-resource-module-container': showMobilePage}" class="resource-module-container">
    <Title title="资源信息" font-size="16px" style="margin-bottom: 17px;"/>
    <el-form
      ref="formRef"
      :model="paramsObj"
      :rules="rules"
      :label-position="formAlign"
      class="lineHeight32"
      label-width="110px">
      <el-row type="flex" class="response-el-row">
        <el-col :span="12" class="responsive-col-lg-8">
          <el-form-item :class="{'data-is-change': contrastResourceDataKeys.includes('resourceType')}" label="资源类型" prop="resourceType">
            <el-radio-group v-model="paramsObj.resourceType" @input="resourceTypeChange">
              <template v-for="item in resourceTypeList">
                <el-radio :label="item.value" :key="item.value">
                  <span style="font-size:14px;">{{ item.label }}</span>
                </el-radio>
              </template>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="responsive-col-lg-8">
          <el-form-item :class="{'data-is-change': contrastResourceDataKeys.includes('orderPlatformId')}" :prop="isMultipleOrder ? '' : 'orderPlatformId'" :required="!isMultipleOrder" label="下单平台">
            <selectWithoutHttp
              v-model="paramsObj.orderPlatformId"
              :disabled="disabledPlatformAccount || isDisabledWithoutFile || editLimt"
              :list-data="orderPlatformOption"
              :clearable="isMultipleOrder"
              key-name="id"
              label-name="value"
              @change="orderPlatformChange"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="responsive-col-lg-8">
          <el-form-item :class="{'data-is-change': contrastResourceDataKeys.includes('orderFormId')}" :prop="isMultipleOrder ? '' : 'orderFormId'" :required="!isMultipleOrder" label="下单形式">
            <selectWithoutHttp
              v-model="paramsObj.orderFormId"
              :disabled="!isPlatform || isDisabledWithoutFile || editLimt"
              :list-data="orderFormOption"
              :clearable="isMultipleOrder"
              key-name="id"
              label-name="value"
              @change="orderFormChange"
            />
          </el-form-item>
        </el-col>
        <el-col v-if="!isMultipleOrder" :span="12" class="responsive-col-lg-8">
          <el-form-item :class="{'data-is-change': contrastResourceDataKeys.includes('resourceId')}" :prop="isMultipleOrder ? '' : 'resourceId'" :required="!isMultipleOrder" label="账号">
            <selectWithUserLoad
              ref="resourceNameRef"
              :disabled="!isPlatform || disabledPlatformAccount || isDisabledWithoutFile || editLimt"
              v-model="paramsObj.resourceId"
              :loadmore-method="resourceList()"
              :hide-select-list="defaultResourceOption || []"
              :init-load="false"
              extern-key="historyResourceName"
              foot="accountNameOrganization"
              key-name="id"
              label-name="value"
              filterable
              open-tool-tip
              clearable
              @changeMethod="resourceChange"
            />
            <!-- :extern-key="searchResourceName?'historyResourceName':''" -->
            <div v-if="orderId && orderId!=='' && hasRouteAuth('crm:orderList:update')" class="updateInfo-btn" @click="toUpdateInfo">更新信息</div>
          </el-form-item>
        </el-col>
        <el-col v-if="isMultipleOrder" :span="12" class="responsive-col-lg-8">
          <el-form-item label="账号附件" prop="accountAttachment" class="accountAttachment">
            <div :style="!showMobilePage?'width: 240px;':''" class="attachment-container">
              <upAttachment
                ref="uploadImg"
                :import-api="'/common/file/upload'"
                :hide-confirm="true"
                :is-disabled="isFileDisabled"
                :file-list="paramsObj.accountAttachment"
                :extend-params="{
                  orderId:orderNum || '', type: 2
                }"
                btn-text="上传文件"
                @upProgress="upProgress"
                @complateSetData="complateSetData"
                @removeFileList="removeFileList" />
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" class="response-el-row">
        <el-col :span="12" class="responsive-col-lg-8">
          <el-form-item :class="{'data-is-change': contrastResourceDataKeys.includes('resourceCode')}" label="账号ID" prop="resourceCode">
            <el-input v-if="!isMultipleOrder" v-model="paramsObj.resourceCode" name="resourceCode" type="text" size="small" disabled />
            <div v-else class="input-container">--</div>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="responsive-col-lg-8">
          <el-form-item :class="{'data-is-change': contrastResourceDataKeys.includes('systemId')}" label="系统ID" prop="systemId">
            <el-input v-if="!isMultipleOrder" v-model="paramsObj.systemId" name="systemId" type="text" size="small" disabled />
            <div v-else class="input-container">--</div>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="responsive-col-lg-8">
          <el-form-item :class="{'data-is-change': contrastResourceDataKeys.includes('operateMode')}" prop="operateMode" label="运营模式">
            <el-cascader
              v-model="paramsObj.operateMode"
              :options="operateModeList"
              :disabled="!isMultipleOrder"
              :props="{
                emitPath: false
              }"
              size="small"
              popper-class="tag-overflow"
              clearable
              filterable
              name="operateMode"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="responsive-col-lg-8">
          <el-form-item :class="{'data-is-change': contrastResourceDataKeys.includes('cooperation')}" label="合作运营方" prop="cooperation">
            <el-input v-if="!isMultipleOrder && paramsObj.cooperation" v-model="paramsObj.cooperation" name="cooperation" type="text" size="small" disabled />
            <div v-else :style="showMobilePage?'width:100%':''" class="input-container">--</div>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="responsive-col-lg-8">
          <el-form-item :class="{'data-is-change': contrastResourceDataKeys.includes('cooperation')}" label="供应商类型" prop="cooperation">
            <el-select
              v-if="paramsObj.cooperation && paramsObj.supplierType !== null"
              v-model="paramsObj.supplierType"
              disabled
              clearable
              popper-class="global-select-down"
              size="small"
            >
              <el-option
                v-for="(select, index) in supplierType"
                :key="index"
                :label="select.value"
                :value="select.id" />
            </el-select>
            <div v-else :style="showMobilePage?'width:100%':''" class="input-container">--</div>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="responsive-col-lg-8">
          <el-form-item label="所有人员" prop="accountOperation">
            <div :style="showMobilePage?'width:100%':''" class="mock-input-container">
              <el-tooltip
                v-if="!isMultipleOrder && paramsObj.accountOperationList"
                :open-delay="800"
                :content="paramsObj.accountOperationList"
                placement="top">
                <div class="mock-input">
                  {{ paramsObj.accountOperationList }}
                  <!-- <el-tag v-for="item in paramsObj.accountOperation" :key="item.id" class="tag" size="mini" type="primary">{{ item.userName }}</el-tag> -->
                </div>
              </el-tooltip>
              <div v-else class="mock-input">--</div>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="responsive-col-lg-8">
          <el-form-item label="所属经营体" prop="resourceAttributionMatrix">
            <div :style="showMobilePage?'width:100%':''" class="mock-input-container">
              <div v-if="!isMultipleOrder && paramsObj.resourceAttributionMatrix" class="mock-input">{{ paramsObj.resourceAttributionMatrix }}</div>
              <div v-else class="mock-input">--</div>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="responsive-col-lg-8">
          <el-form-item label="标签" prop="tag">
            <div :style="showMobilePage?'width:100%':''" class="mock-input-container">
              <div v-if="paramsObj.tag.length" class="mock-input">{{ paramsObj.tag.map(i => i.name).join(',') }}</div>
              <div v-else class="mock-input">--</div>
            </div>
          </el-form-item>
        </el-col>
        <!-- 账号归属 v2.9.2 删除，旧数据合并到协作部门 -->
        <!-- <el-col :span="12" class="responsive-col-lg-8">
          <el-form-item :class="{'data-is-change': contrastResourceDataKeys.includes('accountBelong')}" label="账号归属" prop="accountBelong">
            <selectWithoutHttp
              v-if="isMultipleOrder"
              v-model="paramsObj.accountBelong"
              :list-data="accountBelongList"
              clearable
              key-name="id"
              label-name="value"
            />
            <el-input v-else v-model="paramsObj.accountBelongName" name="accountBelong" type="text" size="small" disabled />
          </el-form-item>
        </el-col> -->
      </el-row>
    </el-form>
    <updateInfoDialog ref="updateInfoDialog" :dialog-type="'detail'" :resource-type="2" @freshData="freshData"/>
  </div>
</template>

<script>
// api
import { platformList, orderFormList, getResource } from '@/api/select';
import { getOperateoptions } from '@/api/resource';
import { getUserList } from '@/api/user';
import { hasRouteAuth } from '@/utils/permission';
// components
import selectWithoutHttp from '@/components/Common/selectWithoutHttp';
import selectWithUserLoad from '@/components/Common/selectWithUserLoad';
import filterCascader from '@/components/Common/filterCascader';
import updateInfoDialog from '@/components/CreateOrder/updateInfo';
import Title from '@/components/Title';
import upAttachment from '@/components/Common/upAttachment/index';
import contrastData from './mixins/contrastData';
import mobileCreate from '@/mixins/mobileCreate';
import { mapState } from 'vuex';

export default {
  components: {
    Title,
    selectWithoutHttp,
    selectWithUserLoad,
    confirm,
    updateInfoDialog,
    upAttachment,
    filterCascader
  },
  mixins: [contrastData, mobileCreate],
  props: {
    isDisabledWithoutFile: {
      type: Boolean,
      default: false
    },
    editLimt: {
      type: Boolean,
      default: false
    },
    isFileDisabled: {
      type: Boolean,
      default: false
    },
    disabledPlatformAccount: { // 是否已封账
      type: Boolean,
      default: false
    },
    orderType: {
      type: Number | String,
      default: null
    },
    orderNum: { // 订单编号，新建时为空
      type: String,
      default: ''
    },
    orderInfoRef: {
      type: String | Object,
      default: 'orderInfoRef'
    },
    noDisplayProps: {
      type: Array,
      default: () => []
    },
    isChangeOrder: { // 是否是变更单
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      searchResourceName: '',
      paramsObj: {
        orderPlatformId: null,
        resourceName: '',
        resourceId: '',
        resourceCode: '',
        systemId: '', // 系统id, v2.9.2新增
        operateMode: '', // 运营模式，v2.9.2 新增，树形结构
        cooperation: '', // 合作运营方，v.2.9.3.1新增
        resourceType: '',
        orderFormId: '',
        orderForm: '',
        accountAttachment: [], // 账号附件
        accountOperationList: '',
        resourceAttributionMatrix: '',
        supplierType: '',
        tag: []
      },
      rules: {
        orderPlatformId: [{ required: true, trigger: 'change', message: '请选择下单平台' }],
        resourceId: [{ required: true, trigger: 'change', message: '请选择账号' }],
        orderFormId: [{ required: true, trigger: 'change', message: '请选择下单形式' }],
        resourceType: [{ required: true, trigger: 'change', message: '请选择资源类型' }]
        // accountAttachment: [{ required: true, trigger: 'change', validator: validateFile('请上传附件') }]
      },
      orderPlatformOption: [], // 下单平台列表
      orderFormOption: [], // 下单形式列表，与下单平台联动
      backupsData: {},
      defaultResourceOption: [], // 默认资源列表
      operateModeList: [], // 运营模式
      // isMultipleOrder: false
      supplierType: [{ value: '公司', id: 0 }, { value: '个人', id: 1 }],
      isInitOrderForm: true
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    isMultipleOrder() { // 是否无号单，多账号
      return this.paramsObj.resourceType ? Number(this.paramsObj.resourceType) !== 0 : false;
    },
    resourceTypeList() {
      return [{ value: 0, label: '单账号' }, { value: 1, label: '多账号' }, { value: 2, label: '无号单' }];
    },
    isPlatform() { // 下单平台是否选中
      const orderPlatformId = this.paramsObj.orderPlatformId;
      return !!orderPlatformId;
    }
  },
  watch: {
    paramsObj: {
      handler: function() {
        if (this.contrastResource) this.contrastResource();
      },
      deep: true
    },
    // 下单形式是否选中流量主, 流量主【品牌标签】字段必填
    'paramsObj.orderFormId': {
      handler: function(val) {
        this.getTrafficMasterVal(val);
      },
      immediate: true
    }
  },
  created() {
    this.orderId = this.$route.params.orderId || '';
    this.init();
  },
  methods: {
    hasRouteAuth,
    isShowInput(prop) {
      return this.noDisplayProps.indexOf(prop) < 0;
    },
    init(orderPlatformId = null) {
      this.platformList();
      this.getOperate();
      // 获取下单形式
      if (orderPlatformId) {
        this.getOrderForm(orderPlatformId);
      }
    },
    // 编辑时注入数据
    insertDetail(item) {
      this.backupsData = _.cloneDeep(item.orderInfo);
      const orderInfo = _.cloneDeep(item.orderInfo);
      // 资源名称后面跟上所属机构字段
      if (item.accountNameOrganization) { orderInfo.resourceName = orderInfo.resourceName + `[${item.accountNameOrganization}]`; }
      if (orderInfo.resourceId && orderInfo.resourceName) {
        this.defaultResourceOption = [{ id: orderInfo.resourceId, value: orderInfo.resourceName }];
      }
      for (const key in this.paramsObj) {
        if (orderInfo[key] || orderInfo[key] === 0) this.paramsObj[key] = orderInfo[key];
      }
      /**
       * 请求所需的下拉数据
       */
      // 获取下单形式
      if (orderInfo.orderPlatformId) this.getOrderForm(orderInfo.orderPlatformId);
      // 获取资源列表
      if (this.$refs.resourceNameRef) this.$refs.resourceNameRef.getListData();
    },
    /**
     * 获取下拉框的数据
     */
    // 获取下单平台的列表
    async platformList() {
      try {
        const result = await platformList();
        this.orderPlatformOption = result.data;
      } catch (error) {
        console.log(error);
      }
    },
    // 获取运营模式的列表
    getOperate() {
      getOperateoptions().then(res => {
        this.operateModeList = res.data;
      });
    },
    // 获取账户名称的列表
    resourceList() {
      const that = this;
      const a = function(params) {
        return new Promise((resolve, reject) => {
          // if (!that.paramsObj.orderPlatformId) {
          //   reject('搜索资源失败，没有平台ID');
          //   return false;
          // }
          params.resourceName = '';
          if (params.userName) params.resourceName = params.userName;
          params.platformId = that.paramsObj.orderPlatformId;
          this.searchResourceName = params.resourceName;
          getResource(params).then(res => {
            resolve(res);
          }).catch(err => {
            reject(err);
          });
        });
      };
      return a;
    },
    // 获取下单形式
    async getOrderForm(orderPlatformId) {
      try {
        const result = await orderFormList(orderPlatformId);
        this.orderFormOption = result.data;
        const res = result.data.findIndex(item => { return item.id === this.paramsObj.orderFormId; });
        if (this.isInitOrderForm && (!result.data.length || res === -1)) {
          this.orderFormOption.push({ id: this.paramsObj.orderFormId, value: this.paramsObj.orderForm });
        }
        this.getTrafficMasterVal(this.paramsObj.orderFormId);
      } catch (error) {
        console.log(error);
      }
    },
    // 判断是否为流量主
    getTrafficMasterVal(val) {
      if (val && (this.orderFormOption.find(item => item.id === val) || {}).value === '流量主') {
        this.$emit('trafficMasterChange', true);
      } else {
        this.$emit('trafficMasterChange', false);
      }
    },
    // 资源类型
    resourceTypeChange() {
      // this.isMultipleOrder = this.paramsObj.resourceType ? Number(this.paramsObj.resourceType) !== 0 : false;
      if (this.isMultipleOrder) this.$refs['formRef'].clearValidate();
      this.paramsObj.resourceId = '';
      if (this.paramsObj.resourceType === 0) {
        this.$nextTick(() => {
          if (this.$refs.resourceNameRef) this.$refs.resourceNameRef.getListData();
        });
      }
    },
    orderFormChange(orderFormId) {
      const value = this.orderFormOption.find(item => item.id === orderFormId);
      this.$emit('orderFormChange', value);
    },
    /**
     * 参数改变时调用的方法  change methods
     */
    orderPlatformChange(plateformId) {
      this.isInitOrderForm = false;
      if (this.paramsObj.resourceId) this.paramsObj.resourceId = '';
      if (this.paramsObj.orderFormId) this.paramsObj.orderFormId = null;
      this.defaultResourceOption = [];
      // 获取下单形式
      this.getOrderForm(plateformId);
      // 获取资源列表
      if (this.$refs.resourceNameRef) this.$refs.resourceNameRef.getListData();
      const publishInfoRef = this.$parent.$refs.publishInfoRef;
      if (publishInfoRef && publishInfoRef.orderPlatformChange) {
        publishInfoRef.orderPlatformChange(plateformId, this.orderPlatformOption);
      }
      this.$emit('plateformChange', plateformId);
    },
    // 过滤在资源侧范围内的账号所有人员
    async filterUser(item) {
      const userId = item.orderOperator.map(i => i.id).join();
      const params = {
        page: 1,
        perPage: 20,
        isOnlyResourceOperator: true,
        userId
      };
      try {
        const res = await getUserList(params);
        if (res.code === 200) {
          return res.data.items;
        }
      } catch (err) {
        console.log(err);
      }
    },
    async resourceChange(item) { // 资源选中,需要回填一些信息
      if (!item) return;
      this.paramsObj.resourceName = item.value;
      this.paramsObj.resourceCode = item.resourceCode || '';
      this.paramsObj.systemId = item.id || ''; // 系统ID ，v2.9.2 新增
      this.paramsObj.operateMode = item.operateMode || ''; // 运营模式 ，v2.9.2 新增
      this.paramsObj.cooperation = item.cooperation || '';
      this.paramsObj.supplierType = item.supplierType;
      this.paramsObj.resourceCategory = item.resourceCategory;
      this.paramsObj.tag = item.tag || [];
      if (item.orderOperator) {
        this.paramsObj.accountOperationList = item.orderOperator.map(i => i.userName).join(','); // 所有人员
      } else {
        this.paramsObj.accountOperationList = '';
      }
      this.paramsObj.resourceAttributionMatrix = item.attributionMatrix; // 所有人员

      // 获取下单形式
      this.getOrderForm(this.paramsObj.orderPlatformId);

      if (item.attributionMatrixId) {
        let dept = null;
        if (item.cooperationDepartment && item.cooperationDepartment.length) {
          dept = item.cooperationDepartment.find(i => i.id === item.attributionMatrixId);
        }
        if (!dept) {
          if (!item.cooperationDepartment) item.cooperationDepartment = [];
          item.cooperationDepartment.push({
            id: item.attributionMatrixId,
            name: item.attributionMatrix
          });
        }
      }

      // 用于回填协作部门和执行人, 兄弟节点通信
      let orderInfoRef;
      if (typeof this.orderInfoRef === 'string') {
        orderInfoRef = this.$parent.$refs[this.orderInfoRef || 'orderInfoRef'];
      } else {
        orderInfoRef = this.orderInfoRef.$refs[this.orderInfoRef.orderInfoRef][0];
      }
      if (orderInfoRef) {
        const orderInfoRefParams = orderInfoRef.paramsObj;
        // 协作部门回填
        let cooperationDepartmentConfirm = false;
        if (item.cooperationDepartment && item.cooperationDepartment.length > 0 && (!orderInfoRefParams.cooperationDepartment || orderInfoRefParams.cooperationDepartment.length === 0)) {
          const cooperationDepartmentIds = item.cooperationDepartment.map(i => i.id);
          this.$set(orderInfoRefParams, 'cooperationDepartment', cooperationDepartmentIds);
        } else if (item.cooperationDepartment && item.cooperationDepartment.length > 0) {
          cooperationDepartmentConfirm = true;
        }
        let resourceUser = [];
        if (item.orderOperator && item.orderOperator.length) {
          resourceUser = await this.filterUser(item);
        }
        // 执行人回填
        let orderOperatorConfirm = false;
        if (item.orderOperator && item.orderOperator.length > 0 && (!orderInfoRefParams.orderResourceOperator || orderInfoRefParams.orderResourceOperator.length === 0)) {
          // orderInfoRefParams.orderOperator = item.orderOperator;
          orderInfoRefParams.orderResourceOperator = resourceUser;
        } else if (item.orderOperator && item.orderOperator.length > 0) {
          orderOperatorConfirm = true;
        }

        // 弹出框
        if (orderOperatorConfirm && !cooperationDepartmentConfirm) {
          const data = { orderResourceOperator: resourceUser };
          if (orderInfoRef.$refs.confirmRef) orderInfoRef.$refs.confirmRef.initConfirm(data, '是否确定覆盖执行人(资源侧)');
        } else if (!orderOperatorConfirm && cooperationDepartmentConfirm) {
          const cooperationDepartmentIds = item.cooperationDepartment.map(i => i.id);
          const data = {
            cooperationDepartment: cooperationDepartmentIds
          };
          if (orderInfoRef.$refs.confirmRef) orderInfoRef.$refs.confirmRef.initConfirm(data, '是否确定覆盖协作部门');
        } else if (orderOperatorConfirm && cooperationDepartmentConfirm) {
          const cooperationDepartmentIds = item.cooperationDepartment.map(i => i.id);
          const data = {
            cooperationDepartment: cooperationDepartmentIds,
            orderResourceOperator: resourceUser
          };
          if (orderInfoRef.$refs.confirmRef) orderInfoRef.$refs.confirmRef.initConfirm(data, '是否确定覆盖执行人(资源侧)和协作部门');
        }
      }
    },
    /** 其他方法 */
    // 上传文件
    upProgress() {
      this.createLoading = true;
    },
    complateSetData({ data, fileName }) {
      this.createLoading = false;
      const fileList = {
        name: fileName,
        url: data.url,
        time: new Date().getTime()
      };
      if (typeof data === 'string') {
        fileList.url = data;
      } else {
        fileList.url = data.url;
      }
      this.paramsObj.accountAttachment.push(fileList);
      this.$refs.formRef.validateField('accountAttachment');
    },
    removeFileList({ file, index }) {
      this.paramsObj.accountAttachment.splice(index, 1);
      this.$refs.formRef.validateField('accountAttachment');
    },
    // 更新信息
    toUpdateInfo() {
      const orderId = this.$route.params.orderId || '';
      if (orderId) {
        this.$refs.updateInfoDialog.dialogVisibleShow(orderId);
      }
    },
    freshData(data) {
      for (const key in data) {
        if (key !== 'cooperationDepartment' && key !== 'orderResourceOperator') {
          this.$set(this.paramsObj, key, data[key]);
        }
      }
      // 用于回填协作部门和执行人(资源侧), 兄弟节点通信
      let orderInfoRef;
      if (typeof this.orderInfoRef === 'string') {
        orderInfoRef = this.$parent.$refs[this.orderInfoRef || 'orderInfoRef'];
      } else {
        orderInfoRef = this.orderInfoRef.$refs[this.orderInfoRef.orderInfoRef][0];
      }
      if (orderInfoRef) {
        const orderInfoRefParams = orderInfoRef.paramsObj;
        if (Object.hasOwnProperty.call(data, 'cooperationDepartment')) {
          this.$set(orderInfoRefParams, 'cooperationDepartment', data.cooperationDepartment);
        }
        if (Object.hasOwnProperty.call(data, 'orderResourceOperator')) {
          this.$set(orderInfoRefParams, 'orderResourceOperator', data.orderResourceOperator);
        }
      }
    },
    // 提供给父组件来验证完整性
    validateForm(validate = true, index = 0) {
      return new Promise((resolve, reject) => {
        if (validate) {
          this.$refs.formRef.validate(valid => {
            if (valid) {
              resolve(valid);
            } else {
              reject(index);
            }
          });
        } else {
          resolve(true);
        }
      });
    },
    // 提供给父组件来获取参数
    getParams(notClear) {
      const params = _.cloneDeep(this.paramsObj);

      // 查找运营模式是否属于 飞博主体或非飞博主体
      if (params.operateMode || params.operateMode === 0) {
        const operateModeItem = this.operateModeList.find(i => {
          let res = false;
          if (i.children) {
            const hasOperateMode = i.children.find(j => j.value === params.operateMode);
            res = !!hasOperateMode;
          }
          return res;
        });
        params.operateModeParent = operateModeItem ? operateModeItem.label : '';
      }
      return params;
    }
  }
};
</script>

<style lang="scss" scoped>
.resource-module-container {
  background: #fff;
  padding: 16px 24px 0 24px;
  & ::v-deep {
    .el-form-item {
      .el-select {
        width: 240px;
      }
      .el-input__inner {
        width: 240px;
      }
      .el-textarea__inner {
        height: 64px !important;
      }
    }
    .el-radio-group {
      white-space: nowrap;
    }
  }
  .updateInfo-btn {
    cursor: pointer;
    position: absolute;
    left: 185px;
    top: 34px;
    line-height: 1.5;
    text-align: left;
    white-space: nowrap;
    color: #406EFF;
  }
}
.data-is-change {
  &::v-deep {
    .el-input__inner {
      color: #FF4E5F;
    }
    .fb-up-attachment {
      .file-item .name {
        color: #FF4E5F;
      }
    }
    .el-tag.el-tag--info > span{
      color: #FF4E5F !important;
    }
  }
}
.input-container {
  width: 240px;
  font-size: 14px;
  height: 32px;
  line-height: 32px;
  border: 1px solid #DCDFE6;
  background-color: #fff;
  border-radius: 4px;
  padding: 0 8px;

  background-color: #F5F7FA;
  border-color: #E4E7ED;
  color: #C0C4CC;
  cursor: not-allowed;
}
.mock-input-container {
  padding: 0 8px;
  width: 240px;
  border: 1px solid #E4E7ED;
  border-radius: 4px;
  background-color: #F5F7FA;
}
.mock-input {
  height: 32px;
  width: 100%;
  line-height: 32px;
  font-size: 14px;
  overflow: hidden;
  color: #C0C4CC;
  cursor: not-allowed;
  white-space: nowrap;
  text-overflow: ellipsis;
  .tag {
    margin-right: 5px;
  }
}
.mobile-resource-module-container {
  .updateInfo-btn {
    left: unset;
    right: 0;
  }
  .input-container,.mock-input-container {
    width: 100% !important;
  }
}
</style>
